<!--
 * @Author: miteng 973203639@qq.com
 * @Date: 2024-06-21 11:40:01
 * @LastEditors: miteng 973203639@qq.com
 * @LastEditTime: 2024-07-30 16:06:47
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<script setup lang="ts">
import { ComponentInternalInstance } from 'vue';
import { defineEmits, defineProps, getCurrentInstance } from 'vue'

const { appContext: { app: { config: { globalProperties } } } } = getCurrentInstance() as ComponentInternalInstance

interface Props {
    modelValue: string
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const clickFunc = (icon: string): void => {
    document.body.click();
    console.log(props)
    emits('update:modelValue', icon)
}
</script>

<template>
    <el-popover trigger="click" :width="256">
        <template #reference>
            <el-button :icon="modelValue"></el-button>
        </template>
        <div class="el-icon-picker">
            <component v-for="icon in globalProperties.$icons" :key="icon" :is="icon"
                :class="[icon, 'icon', { 'icon-active': icon == modelValue }]" @click="clickFunc(icon)">
            </component>
        </div>
    </el-popover>
</template>

<style scoped>
.el-icon-picker {
    height: 256px;
    overflow-y: scroll;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: var(--el-text-color-regular);
    font-size: 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 5px;
}

.icon:hover {
    color: var(--el-color-primary);
}

.icon-active {
    color: var(--el-color-primary);
}
</style>